@charset "utf-8";

@import "reset";
@import "common";

.one{
    width: 100%;
    background: #8bc01f;
    padding: 60px 0;
    .container{
        >div:first-of-type{
            h2{
                font-size: 47px;
                color: white;
                line-height: 70px;
                span{
                    display: inline-block;
                    width: 55px;
                    height: 53px;
                    line-height: 53px;
                    border-radius: 2px;
                    background: white;
                    font-size: 47px;
                    color: #8BC01F;
                    text-align: center;
                    margin-right: 5px;
                }
            }
            h3{
                font-size: 23px;
                color: white;
                line-height: 55px;
            }
            p{
                font-size: 14px;
                color: white;
                line-height: 30px;
                margin-top: 10px;
            }
            a{
                width: 100px;
                height: 34px;
                display: inline-block;
                background: #e8f2d2;
                color: #8bc01f;
                line-height: 34px;
                text-align: center;
                border-radius: 4px;
                margin-top: 30px;
            }
        }
        >div:last-of-type{
            img{
                width: 100%;
            }
        }
    }
}
.tow{
    width: 100%;
    background: #3393df;
    padding: 60px 0;
    .container{
        h2{
            font-size: 47px;
            color: white;
            line-height: 70px;
            span{
                display: inline-block;
                width: 42px;
                height: 44px;
                line-height: 44px;
                border-radius: 2px;
                background: white;
                font-size: 47px;
                color: #3393df;
                text-align: center;
                margin-right: 5px;
            }
        }
        >div:first-of-type{
            
            img{
                width: 100%;
            }
        }
        >div:nth-of-type(2){
            h3{
                font-size: 23px;
                color: white;
                line-height: 55px;
            }
            p{
                font-size: 14px;
                color: white;
                line-height: 30px;
                margin-top: 10px;
            }
        }
        >div:last-of-type{
            margin-top: 120px;
            img{
                width: 100%;
            }
        }
    }
    
}

.three{
    width: 100%;
    background: #fff;
    padding: 60px 0;
    .container{
        >div{
            h2{
                font-size: 47px;
                color: #3393df;
                line-height: 70px;
                span{
                    display: inline-block;
                    width: 42px;
                    height: 44px;
                    line-height: 44px;
                    border-radius: 2px;
                    background: #3393df;
                    font-size: 47px;
                    color: white;
                    text-align: center;
                    margin-right: 5px;
                }
            }
            h3{
                font-size: 18px;
                line-height: 60px;
            }
            h4{
                font-size: 17px;
                line-height: 50px;
                color: #3393df;
                margin-top: 10px;
            }
            p{
                font-size: 14px;
                color: #848484;
                line-height: 24px;
                text-indent: 30px;
                letter-spacing: 2px;
            }
            div{
                margin-top: 30px;
                text-align: center;
                img{
                    display: inline-block;
                }
            }
        }
    }
}

.four{
    width: 100%;
    background: #f7f7f7;
    padding: 60px 0;
    .container{
        >div{
            h2{
                font-size: 47px;
                color: #3393df;
                line-height: 70px;
                span{
                    display: inline-block;
                    width: 42px;
                    height: 44px;
                    line-height: 44px;
                    border-radius: 2px;
                    background: #3393df;
                    font-size: 47px;
                    color: white;
                    text-align: center;
                    margin-right: 5px;
                }
            }
            h3{
                font-size: 18px;
                line-height: 60px;
            }
            h4{
                font-size: 17px;
                line-height: 50px;
                color: #3393df;
                margin-top: 10px;
            }
            p{
                font-size: 14px;
                color: #848484;
                line-height: 24px;
                text-indent: 30px;
                letter-spacing: 2px;
            }
            div{
                margin-top: 30px;
                text-align: center;
                img{
                    display: inline-block;
                }
            }
        }
    }
}

@media (max-width: 767px){
    .one>.container>div:last-of-type{
        float: right;
    }
    .tow>.container>h2{
        text-align: center;
    }
    .tow>.container h3{
        text-align: center;
    }
    .tow>.container>div:last-of-type{
        margin-top: 20px;
        
    }
    .tow>.container{
        text-align: center;
        
    }
    .tow>.container>div{
        float: none;
        display: inline-block;
        text-align: center;
    }
}
